<template>
  <div>
    <div class="container1">
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">离宿查询</div>
      </div>
      <el-form ref="searchObj" :inline="true" :model="searchObj" label-width="80px" size="mini" style="margin-bottom: -10px; margin-top: 10px">
        <el-form-item label="姓名">
          <el-input v-model="searchObj.name" placeholder="请输入姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="劳务公司">
          <el-input v-model="searchObj.company" placeholder="请输入劳务公司" clearable></el-input>
        </el-form-item>
        <el-form-item label="电话">
          <el-input v-model="searchObj.phone" placeholder="请输入电话" clearable></el-input>
        </el-form-item>
        <el-form-item label="宿舍名称">
          <el-input v-model="searchObj.roomName" placeholder="请输入宿舍名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="备案登记">
          <el-select v-model="searchObj.fxhc" placeholder="请选择备案登记" style="width: 100%">
            <el-option v-for="item in fxhcList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="margin-left: 2rem">
          <el-button type="primary" icon="el-icon-search" @click="initDataList">查询</el-button>
          <el-button @click="reset" icon="el-icon-refresh">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="container" style="margin-top: 1rem">
      <div class="common-list-class">
        <div style="display: flex">
          <div class="common-title-div"></div>
          <div class="common-title-text">离宿列表</div>
        </div>
        <div style="display: flex">
          <el-upload class="upload-file" :headers="uploadHeader" :before-upload="beforeUpload" :action="uploadUrl" :on-success="uploadSucess" :on-error="uploadError" :show-file-list="false">
            <el-button type="primary" icon="el-icon-download">上传离宿表</el-button>
          </el-upload>
          <el-button type="primary" size="mini" style="height: 32px; margin-left: 10px" @click="allExportClick" icon="el-icon-position">下载模版</el-button>
          <!-- <el-button type="primary" size="mini"  icon="el-icon-set-up" style="height:32px;margin-left:10px;" @click="inworkAllClick">批量离宿</el-button> -->
          <!-- <el-button type="primary" size="mini" style="height:32px;margin-left:10px;" @click="riskCheck" icon="el-icon-position">备案登记</el-button>-->
          <!-- <el-button type="primary" size="mini" style="height:32px;margin-left:10px;" icon="el-icon-finished">批量下载信息卡</el-button> -->
        </div>
      </div>
      <!-- 查询列表 -->
      <el-table :data="tableData" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" @selection-change="handleSelectionChange" max-height="550" border>
        <el-table-column type="selection" width="55" align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="phone" label="电话" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="identity" label="身份证号" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="labourName" label="劳务公司" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="jobTime" label="入职时间" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="surveyStatus" label="备案登记" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{ surveyStatusObj[scope.row.surveyStatus] }}
          </template>
        </el-table-column>
        <el-table-column prop="violationDiscipline" label="是否违纪" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            {{ violationDisciplineObj[scope.row.violationDiscipline] }}
          </template>
        </el-table-column>
        <el-table-column prop="nativePlace" label="籍贯" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="entryDorm" label="入宿时间" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="leaveDorm" label="离宿时间" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="buildNum" label="宿舍名称" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="roomNum" label="宿舍号" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="100" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-tickets" @click="detailsClick(scope.row)">详情</el-button>
            <!-- <el-button type="primary" size="mini" icon="el-icon-lx-exit" @click="inworkClick(scope.row)">离宿登记</el-button> -->
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-row type="flex" justify="end">
        <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="pageSizes" :page-size="pagesize" layout="total, sizes, prev, pager, next, jumper" :total="total">
        </el-pagination>
      </el-row>
    </div>

    <!-- 导入成功或失败列表 -->
    <el-dialog title="导入列表" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="daoruFlag" width="80%" :before-close="daoruClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">导入列表</div>
      </div>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入成功列表</div>
      </div>
      <el-table :data="successList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border>
        <el-table-column type="index" label="序号" width="50" align="center">
        </el-table-column>
        <el-table-column prop="leaveDorm" label="离宿时间" width="200" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" show-overflow-tooltip align="center">
        </el-table-column>
        <el-table-column prop="identity" label="身份证号" show-overflow-tooltip align="center">
        </el-table-column>
      </el-table>
      <div class="common-title-flex">
        <div class="common-title-div"></div>
        <div class="common-title-text">导入失败列表</div>
      </div>
      <el-table :data="failList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px; margin-bottom: 10px" max-height="550" border>
        <el-table-column type="index" label="序号" width="50" align="center" fixed="left">
        </el-table-column>
        <el-table-column prop="leaveDorm" label="离宿时间" width="250" align="center">
          <template slot-scope="scope">
            <el-date-picker v-model="scope.row.leaveDorm" value-format="yyyyMMdd" type="date" placeholder="选择离宿时间">
            </el-date-picker>
          </template>
        </el-table-column>
        <el-table-column prop="name" label="姓名" width="100" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.name" placeholder="请输入姓名" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="identity" label="身份证号" width="200" align="center">
          <template slot-scope="scope">
            <el-input v-model="scope.row.identity" placeholder="请输入身份证号" clearable></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="errorMsg" label="失败原因" width="200" show-overflow-tooltip align="center">
          <!-- <template slot-scope="scope">
                        <div style="color:red;">{{scope.row.errorMsg}}</div>
                    </template> -->
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="200" align="center">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" icon="el-icon-success" @click="confirmClick(scope.row)">确定</el-button>
            <el-button type="danger" size="mini" icon="el-icon-delete-solid" @click="deleteClick(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" :disabled="failList.length !== 0" @click="daoruClick">提交</el-button>
        <el-button size="mini" @click="daoruClose">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 警员详情 -->
    <el-dialog title="劳务工详情" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="detailsFlag" width="60%" :before-close="detailsClose" center>
      <div style="height: 500px; overflow: auto">
        <div class="basic_information_class">
          <div class="avator_class">
            <el-row type="flex" justify="center" style="margin-top: 1rem">
              <el-image :src="imageUrl" style="height: 210px" fit="fill"></el-image>
            </el-row>
          </div>
          <div class="avator_right_class">
            <el-row type="flex" justify="center" style="margin-top: 1rem">
              <el-col :span="4" class="bold-class">姓名</el-col>
              <el-col :span="5" class="grey-class">{{
                employeeInfo.name
              }}</el-col>
              <el-col :span="4" class="bold-class">性别</el-col>
              <el-col :span="4" class="grey-class">{{
                employeeDetails.sexDesc
              }}</el-col>
              <el-col :span="4" class="bold-class">民族</el-col>
              <el-col :span="4" class="grey-class">{{
                employeeDetails.nation
              }}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">出生年月</el-col>
              <el-col :span="5" class="grey-class">{{
                employeeDetails.birthday
              }}</el-col>
              <el-col :span="4" class="bold-class">年龄</el-col>
              <el-col :span="4" class="grey-class">{{
                employeeDetails.age
              }}</el-col>
              <el-col :span="4" class="bold-class">婚姻状态</el-col>
              <el-col :span="4" class="grey-class">{{
                employeeDetails.isMarryDesc
              }}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">邮箱</el-col>
              <el-col :span="5" class="grey-class">{{
                employeeDetails.email
              }}</el-col>
              <el-col :span="4" class="bold-class">联系电话</el-col>
              <el-col :span="12" class="grey-class">{{
                employeeInfo.phone
              }}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">籍贯</el-col>
              <el-col :span="5" class="grey-class">{{
                employeeDetails.nativePlace
              }}</el-col>
              <el-col :span="4" class="bold-class">身份证号</el-col>
              <el-col :span="12" class="grey-class">{{
                employeeInfo.identity
              }}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">家庭住址</el-col>
              <el-col :span="21" class="grey-class">{{
                employeeDetails.nativeAddr
              }}</el-col>
            </el-row>
            <el-row type="flex" justify="center">
              <el-col :span="4" class="bold-class">现住地址</el-col>
              <el-col :span="21" class="grey-class">{{
                employeeDetails.presentAddr
              }}</el-col>
            </el-row>
          </div>
        </div>
        <el-divider>学历信息</el-divider>
        <el-table :data="educateList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px" max-height="550" border>
          <el-table-column prop="beginTime" label="入学日期" width="80" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="毕业日期" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="schoolName" label="毕业院校" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="major" label="专业" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="educationLevelDesc" label="学历" width="120" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="remark" label="备注" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
        <el-divider>工作经历</el-divider>
        <el-table :data="workList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px" max-height="550" border>
          <el-table-column prop="beginTime" label="开始时间" width="80" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="endTime" label="结束时间" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="companyName" label="单位名称" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="position" label="岗位" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="leaveReason" label="辞职原因" width="120" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="hasCertifyDesc" label="是否有证明材料" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
        <el-divider>家庭信息</el-divider>
        <el-table :data="familyList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px" max-height="550" border>
          <el-table-column prop="familyName" label="姓名" width="80" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyRelativeDesc" label="与本人关系" width="100" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyBirth" label="出生年月" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="componentName" label="工作单位" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyPosition" label="担任职务" width="120" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyPhone" label="联系电话" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-col :span="4" class="bold-class">在本公司有无熟人</el-col>
          <el-col :span="4" class="grey-class">{{
            employeeDetails.hasFriendDesc
          }}</el-col>
          <el-col :span="4" class="bold-class">姓名</el-col>
          <el-col :span="4" class="grey-class">{{
            employeeDetails.friendName
          }}</el-col>
          <el-col :span="4" class="bold-class">联系电话</el-col>
          <el-col :span="4" class="grey-class">{{
            employeeDetails.friendPhone
          }}</el-col>
        </el-row>
        <el-divider>紧急联系人</el-divider>
        <el-table :data="judgeList" size="mini" :row-style="rowStyle" :header-cell-style="tableHeaderColor" style="width: 100%; margin-top: 10px" max-height="550" border>
          <el-table-column prop="familyName" label="姓名" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familySexDesc" label="性别" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyRelativeDesc" label="与本人关系" show-overflow-tooltip align="center">
          </el-table-column>
          <el-table-column prop="familyPhone" label="联系方式" show-overflow-tooltip align="center">
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-col :span="4" class="bold-class">是否住宿</el-col>
          <el-col :span="10" class="grey-class">{{
            employeeDetails.isDormDesc
          }}</el-col>
          <el-col :span="4" class="bold-class">招聘渠道</el-col>
          <el-col :span="10" class="grey-class">{{
            employeeDetails.recruitmentChannels
          }}</el-col>
        </el-row>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="detailsClose">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 备案登记 -->
    <el-dialog title="备案登记" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="fxhcFlag" width="40%" :before-close="fxhcClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">备案登记</div>
      </div>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">备案登记</div>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="18">共有<span style="color: red; font-size: 16px; font-weight: bold">{{
            selectList.length
          }}</span>人需要备案登记：</el-col>
      </el-row>
      <el-row type="flex" justify="center" v-for="(item, index) in fxhcDetails" :key="index">
        <el-col :span="14" class="bold-class">{{ item.name }}</el-col>
        <el-col :span="4" class="grey-class">{{ item.number }}人</el-col>
      </el-row>
      <el-row type="flex" justify="center">
        <el-col :span="18" style="color: #b7b7b7; font-size: 12px"><i class="el-icon-s-opportunity" style="color: #f6ae56"></i>温馨提示：您的申请将会有专员进行处理，请申请等待</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="applicationClick">申请备案</el-button>
        <el-button size="mini" @click="fxhcClose">关 闭</el-button>
      </span>
    </el-dialog>

    <!-- 离宿弹出框 -->
    <el-dialog title="确认离宿" :close-on-click-modal="false" :close-on-press-escape="false" :visible.sync="inworkFlag" width="40%" :before-close="inworkClose" center>
      <div slot="title" class="header-title">
        <div class="header-title-div"></div>
        <div class="header-title-text">确认离宿</div>
      </div>
      <el-row type="flex" justify="center">
        <el-col :span="4"><span style="color: red">*</span>离宿时间</el-col>
        <el-col :span="10">
          <el-date-picker v-model="inworkTime" value-format="yyyyMMdd" type="date" placeholder="选择离宿时间">
          </el-date-picker>
        </el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="mini" @click="inworkConfirm">确 定</el-button>
        <el-button size="mini" @click="inworkClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import mixin from "@/mixin/mixin.js";
export default {
  name: "laborer",
  mixins: [mixin],
  data() {
    return {
      imageUrl:
        "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg",
      daoruFlag: false,
      inworkTime: "",
      inworkFlag: false,
      uploadHeader: {},
      uploadUrl: "/wgry/labour/importLeaveDorm",
      judgeList: [],
      workList: [],
      educateList: [],
      familyList: [],
      laboerRadio: "基本信息",
      tabList: [
        {
          title: "基本信息",
        },
        {
          title: "家庭信息",
        },
        {
          title: "学历信息",
        },
        {
          title: "工作经历",
        },
        {
          title: "紧急联系人",
        },
      ],
      employeeInfo: {},
      employeeDetails: {},
      violationDisciplineObj: {
        0: "未违纪",
        1: "已违纪",
      },
      surveyStatusObj: {
        0: "未提交",
        1: "已提交",
        2: "备案中",
        3: "已备案",
      },
      fxhcFlag: false,
      fxhcList: [
        {
          value: "",
          label: "全部",
        },
        {
          value: "0",
          label: "未提交",
        },
        {
          value: "1",
          label: "已提交",
        },
        {
          value: "2",
          label: "备案中",
        },
        {
          value: "3",
          label: "已备案",
        },
      ],
      fxhcCount: 134,
      fxhcDetails: [],
      detailsFlag: false,
      isEditTitle: "",
      newaddFlag: false,
      pageSizes: [10, 15, 50, 100],
      pagesize: 10,
      total: 10,
      currentPage: 1,
      selectList: [],
      tableData: [],
      searchObj: {
        name: "",
        company: "",
        phone: "",
        fxhc: "",
        buildNum: "",
      },
      failList: [],
      successList: [],
    };
  },
  created() {
    this.uploadHeader.Authorization = this.requestToken;
    this.initDataList();
  },
  methods: {
    // 关闭
    daoruClose() {
      this.daoruFlag = false;
    },
    // 提交
    daoruClick() {
      let self = this;
      let params = self.successList;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/labour/editLeaveDorm`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.daoruFlag = false;
            self.$message({
              message: "提交成功！",
              type: "success",
            });
            self.initDataList();
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    inworkClose() {
      this.inworkTime = "";
      this.inworkFlag = false;
    },
    inworkConfirm() {
      this.inworkTime = "";
      this.inworkFlag = false;
    },
    laboerRadioChange(value) {
      this.laboerRadio = value;
    },
    integralClick(row) {},
    inworkAllClick() {
      if (!this.selectList || !this.selectList.length) {
        this.$message({
          message: "请选择需要备案数据！",
          type: "error",
        });
        return;
      }
    },
    inworkClick(row) {
      this.inworkFlag = true;
    },
    initDataList() {
      let params = {
        name: this.searchObj.name,
        labourName: this.searchObj.company,
        phone: this.searchObj.phone,
        surveyStatus: this.searchObj.fxhc,
        buildNum: this.searchObj.roomName,
        jobStatus: 3,
        pageNumber: this.currentPage,
        pageSize: this.pagesize,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/labour/queryDownLineEmployeeDormList`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
        // params: params
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.tableData = res.data.data.list;
            this.pagesize = res.data.data.pageSize;
            this.currentPage = res.data.data.pageNumber;
            this.total = res.data.data.total;
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 确认
    confirmClick(row) {
      let self = this;
      if (!row.leaveDorm || !row.name || !row.identity) {
        self.$message({
          message: "请输入必填字段再提交！",
          type: "error",
        });
        return;
      }
      let params = row;
      self.showLoading();
      self
        .$axios({
          method: "post",
          url: `/labour/validateFailLeaveDorm`,
          headers: {
            Authorization: self.requestToken,
          },
          data: params,
        })
        .then((res) => {
          self.hideLoading();
          if (res.data.code == "20000") {
            self.failList.forEach((item, index) => {
              if (item.id == row.id) {
                self.failList.splice(index, 1);
              }
            });
            self.successList.push(res.data.data);
            self.$message({
              message: "校验成功！",
              type: "success",
            });
          } else {
            self.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          self.hideLoading();
          self.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 删除
    deleteClick(row) {
      let self = this;
      self.failList.forEach((item, index) => {
        if (item.id == row.id) {
          self.failList.splice(index, 1);
        }
      });
      self.$message({
        message: "删除成功！",
        type: "success",
      });
    },
    // 批量导出
    allExportClick() {
      let url = `${this.modelUrl}离宿登记导入模板.xls`;
      window.open(url);
    },
    riskCheck() {
      if (!this.selectList || !this.selectList.length) {
        this.$message({
          message: "请选择需要备案数据！",
          type: "error",
        });
        return;
      }
      this.fxhcFlag = true;
    },
    applicationClick() {
      let list = [];
      this.selectList.forEach((item) => {
        list.push({
          id: item.id,
          openId: item.openId,
          componentCode: item.componentCode,
          surveyStatus: "1",
        });
      });
      let params = {
        ids: list,
      };
      this.showLoading();
      this.$axios({
        method: "post",
        url: `/labour/checkLabor`,
        headers: {
          Authorization: this.requestToken,
        },
        data: params,
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.fxhcFlag = false;
            this.$message({
              message: res.data.message,
              type: "success",
            });
            this.initDataList();
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    fxhcClose() {
      this.fxhcFlag = false;
    },
    tableHeaderColor({ row, column, rowIndex, columnIndex }) {
      return "background-color:#f5f5f5;color:#626262;";
    },
    rowStyle({ row, rowIndex }) {
      let style1 = {};
      let style2 = {};
      if (rowIndex % 2 == 0) {
        style1.background = "#ffffff";
        return style1;
      } else {
        style2.background = "#f5f5f5";
        return style2;
      }
    },
    handleSelectionChange(value) {
      this.selectList = value;
      console.log(this.selectList);
      if (value && value.length) {
        let dataList = value.map((item) => item["labourName"]);
        let list = this.getRepeatNum(dataList);
        let fxhcDetails = [];
        for (let i in list) {
          fxhcDetails.push({
            name: i,
            number: list[i],
          });
        }
        this.fxhcDetails = fxhcDetails;
      }
    },
    getRepeatNum(arr) {
      return arr.reduce(function (prev, next) {
        prev[next] = prev[next] + 1 || 1;
        return prev;
      }, []);
    },
    beforeUpload(file) {
      this.showLoading("导入中");
    },
    uploadSucess(response) {
      this.hideLoading();
      if (response.code == "20000") {
        this.daoruFlag = true;
        this.$message({
          message: "导入成功！",
          type: "success",
        });
        this.failList = response.data.failList;
        this.successList = response.data.list;
        console.log("response---->:", response);
      } else {
        this.$message({
          message: response.message,
          type: "error",
        });
      }
    },
    uploadError(error) {
      this.$message({
        message: "导入失败！",
        type: "error",
      });
      this.hideLoading();
      console.log("error-----", error);
    },
    // 取消点击
    handleClose() {
      this.cancel();
    },
    // 点击分页当前页多少数据
    handleSizeChange(val) {
      this.pagesize = val;
      this.initDataList();
    },
    // 点击分页页数
    handleCurrentChange(val) {
      this.currentPage = val;
      this.initDataList();
    },
    //  重置
    reset() {
      this.searchObj = {
        name: "",
        company: "",
        phone: "",
        fxhc: "",
        buildNum: "",
      };
      this.initDataList();
    },
    // 注销
    logoutClick() {
      this.$confirm("请确认是否注销该劳务工?", "注销", {
        confirmButtonText: "是",
        cancelButtonText: "否",
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "注销成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消注销",
          });
        });
    },
    // 详情
    detailsClick(row) {
      this.showLoading();
      this.$axios({
        method: "get",
        url: `/labour/detailsEmployee/${row.openId}/1`,
        headers: {
          Authorization: this.requestToken,
        },
      })
        .then((res) => {
          this.hideLoading();
          console.log("res---->:", res);
          if (res.data.code == "20000") {
            this.detailsFlag = true;
            this.employeeInfo = res.data.data.employeeInfo || {};
            this.employeeDetails = res.data.data.employeeDetails || {};
            this.familyList = res.data.data.familyList || [];
            this.educateList = res.data.data.educationList || [];
            this.workList = res.data.data.workList || [];
            this.judgeList = res.data.data.contactList || [];
          } else {
            this.$message({
              message: res.data.message,
              type: "error",
            });
          }
        })
        .catch((err) => {
          this.hideLoading();
          this.$message({
            message: err,
            type: "error",
          });
        });
    },
    // 详情关闭
    detailsClose() {
      this.detailsFlag = false;
      this.laboerRadio = "基本信息";
    },
  },
};
</script>
<style scoped>
/* .el-switch__core:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 1px;
    border-radius: 100%;
    transition: all .3s;
    width: 16px;
    height: 16px;
    background-color: #fff;
  }
  .el-switch.is-checked .el-switch__core:after {
    left: 100%;
    margin-left: -17px;
  } */
.common-title-flex {
  display: flex;
}
.common-title-div {
  width: 3px;
  height: 16px;
  background-color: #368af7;
  margin-top: 2px;
}
.common-title-text {
  margin-left: 4px;
  font-size: 14px;
}
.common-list-class {
  display: flex;
  justify-content: space-between;
  margin-top: -10px;
}
.upload-file >>> .el-upload--text {
  border: none;
  width: 120px;
  height: 32px;
}
</style>>